<template>
    <div>
        <div style="width: 100%;text-align:right">
            <el-button @click="newRecord">新增</el-button>
            <el-button @click="editRecord">编辑</el-button>
            <el-button @click="removeRecord">删除</el-button>
        </div>
        <el-table :data='tableData' @row-click="edit" ref="multipleSelection" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column :label='item.name' :prop='item.name' class="item.class" :style="item.width"
                             v-for='(item,index) in columns'
                             :key='index'></el-table-column>
            <!--        <el-table-column>-->
            <!--            <el-button  v-for="item in buttons" :key="item.name">{{item.name}}</el-button>-->
            <!--        </el-table-column>-->
        </el-table>
    </div>
</template>

<script>
    export default {
        name: 'TableTemplate',
        props: {
            tableData: Array,
            columns: Array,
            buttons: Array,
            url: String
        },
        data() {
            return {
                multipleSelection: [],
            }
        },
        methods: {
            edit: function (row, column) {
                console.log(row)
                console.log(column)
            },
            newRecord() {
                let parent = this.$parent;
                while (parent.dialogTableVisible == undefined) {
                    parent = parent.$parent;
                }
                const form = {};
                Object.keys(parent.form).forEach(function (key) {
                    form[key] = ''

                })
                parent.form = form;
                parent.dialogTableVisible = true
            },
            editRecord() {
                if (this.multipleSelection.length != 1) {
                    this.$message.error('编辑失败，请选择一条记录');
                    return;
                }
                let parent = this.$parent;
                while (!parent.form) {
                    parent = parent.$parent;
                }
                parent.dialogTableVisible = true
                parent.form = this.multipleSelection[0];
            },
            saveRecord() {
                console.log(111)
            },
            removeRecord() {
                if (this.multipleSelection.length == 0) {
                    this.$message.error('删除失败，请选择记录');
                    return;
                }
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>
